/*
 * @Description: 
 * @Version: 1.0
 * @Autor: ziwei
 * @Date: 2021-05-27 14:53:27
 * @LastEditors: ziwei
 * @LastEditTime: 2021-06-30 10:36:58
 */
import { patch } from "./vdom/patch";
import Watcher from './observe/watcher'
export function mountComponent(vm) {
    //初始化流程
    let updateComponent = () =>{
        vm._update(vm._render());///render _c _v _s
    }
    callHook(vm,'beforeCreate');
    //每个组件都i有一个watch 我们把这个watcher称之为渲染watcher true渲染watch
    new Watcher(vm, updateComponent,()=>{
        console.log("后续增添更新勾子函数 update");
        callHook(vm,'created');
    },true)
    callHook(vm,'mounted');
}

export function lifeCycleMixin(Vue) {
    Vue.prototype._update=function(vnode) {
        //采用先序深度遍历 创建节点（遇到节点就创造节点 递归创建）
        const vm = this;
        let preVnode = vm._prevVnode;
        //第一次渲染 是根据虚拟节点 生成真实节点 替换掉原来的节点
        //第二次 生成一个新的虚拟节点 和老的虚拟节点进行对比
        vm._preVnode = vnode;
        if(!preVnode){//没有节点就是初次渲染
            vm.$el = patch(vm.$el,vnode)
        }else{
            vm.$el = patch(preVnode, vnode)
        }
    }
}

export function callHook(vm,hook) {
    let handlers = vm.$options[hook];
    handlers&&handlers.forEach(fn => {
        fn.call(vm);//生命周期的this永远指向实例
    });
}